25:["$","title",null,{"children":"Flowers and Tracks: A visual and cartographic exploration | Cham Mamador | Observable"}] 49:T46e,viewof typhoonScrubber = Scrubber(sortedTyphoons, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 20, format: typhoonScrubber => { let name = typhoonScrubber.properties.name; let start = getMonthYear(typhoonScrubber)[0]; let end = getMonthYear(typhoonScrubber)[1]; geojsonLayerStatic.setStyle({color: "red", weight: 2, opacity: 0.2, }) geojsonLayer.clearLayers(); geojsonLayer.addData(typhoonScrubber); if(!geojsonLayerStatic.hasLayer(typhoonScrubber)){ geojsonLayerStatic.addData(typhoonScrubber); } d3.selectAll("#overlayLLSVGText").remove(); const overlayLLSVGText = d3.select(initialmap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',650) // .style('position','relative') .attr('id','overlayLLSVGText'); // add text to the map addBigYearTextStatic(overlayLLSVGText,`${getMonthYear(typhoonScrubber)[0]}`,'black',100,100) console.log(d3.selectAll("#overlayLLSVGText")); return `${name} from ${start} to ${end} ` } });4a:Ta51,viewof typhoonYearScrubber = Scrubber(typhoonYear, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 300, format: typhoonYearScrubber => { let selectedYearGeoJsonData = filteredTyphoonsPerYear(sortedTyphoons,typhoonYearScrubber); geojsonPerYearLayer.clearLayers(); geojsonPerYearLayer.addData(selectedYearGeoJsonData[0]); geojsonPerYearLayer.setStyle({color: "grey", weight: 2, opacity: 0.2, }); layerGPerYear.clearLayers(); let noIntensityData = false; for (const feat of selectedYearGeoJsonData[0].features){ for (var i = 0; i< feat.geometry.coordinates.length; i++){ let latlng =L.latLng(feat.geometry.coordinates[i][1], feat.geometry.coordinates[i][0]); layerGPerYear.addLayer(L.circle(latlng, {stroke: false,radius: feat.properties.windspeed[i] ? feat.properties.windspeed[i]*3000 :0, opacity: 0.3, color: feat.properties.windspeed[i]?coloralt(feat.properties.windspeed[i]):'transparent'})); noIntensityData = isNaN(feat.properties.windspeed[i]) ? true : false; } } d3.select("#overlayLLSVGText_perYear").remove(); const overlayLLSVGText_perYear = d3.select(perYearMap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',250) .attr('id','overlayLLSVGText_perYear'); // overlayLLSVGText.append('text') // .text(`${avePeakIntensity(selectedYearGeoJsonData[0].features)}`) d3.selectAll("#ave-peak-text").remove(); let maxPeakValue = maxPeakIntensity(selectedYearGeoJsonData[0].features); if(maxPeakValue != 'Nan'){ let maxPeakText = overlayLLSVGText_perYear.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 65) .attr('font-weight', 600) .attr('fill', coloralt(maxPeakValue)) .attr('opacity', 1) .attr('transform', 'translate(50, 150)') .text(`${maxPeakIntensity(selectedYearGeoJsonData[0].features)} kts`) .attr('id','ave-peak-text'); } console.log('ws',selectedYearGeoJsonData[1],maxPeakIntensity(selectedYearGeoJsonData[0].features)); addBigYearTextStatic(overlayLLSVGText_perYear,`${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`,'black',50,90,'perYear-big-text') if(noIntensityData){ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons; Note: No intensity data.`; }else{ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`; } } });4b:Td1f,viewof typhoonLandfallScrubber = Scrubber(typhoonYear, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 300, format: typhoonYearScrubber => { let selectedYearGeoJsonData = filteredTyphoonsPerYear(sortedTyphoons,typhoonYearScrubber); geojsonLandfallLayer.clearLayers(); geojsonLandfallLayer.addData(selectedYearGeoJsonData[0]); geojsonLandfallLayer.setStyle({color: "grey", weight: 2, opacity: 0.5, }); layerGLandfall.clearLayers(); let noIntensityData = false; let landfallPointsCount = 0; let typhoonLandfallCount =0; let typhoonLandfallCheck =false; for (const feat of selectedYearGeoJsonData[0].features){ for (var i = 0; i< feat.geometry.coordinates.length; i++){ let latlng =L.latLng(feat.geometry.coordinates[i][1], feat.geometry.coordinates[i][0]); //Check intersect land mass intersect here let tPoint = turf.point([feat.geometry.coordinates[i][0],feat.geometry.coordinates[i][1]]); let landfall = turf.booleanIntersects(world, tPoint); if(landfall){ layerGLandfall.addLayer(L.circle(latlng, {stroke: false,radius: feat.properties.windspeed[i] ? feat.properties.windspeed[i]*3000 :0, opacity: 0.9, color: feat.properties.windspeed[i]?coloralt(feat.properties.windspeed[i]):'transparent'})); landfallPointsCount++; typhoonLandfallCheck =true; } noIntensityData = isNaN(feat.properties.windspeed[i]) ? true : false; } if(typhoonLandfallCheck){ typhoonLandfallCount++; } } d3.select("#overlayLLSVGText_landFall").remove(); const overlayLLSVGText_landfall = d3.select(landfallMap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',250) .attr('id','overlayLLSVGText_landFall'); d3.selectAll("#landfall-points").remove(); let maxPeakValue = maxPeakIntensity(selectedYearGeoJsonData[0].features); if(maxPeakValue != 'Nan'){ let avePeakText = overlayLLSVGText_landfall.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 50) .attr('font-weight', 600) .attr('fill', 'purple') .attr('opacity', 0.8) .attr('transform', 'translate(50, 150)') //.text(`${landfallPointsCount} landfall points; ${typhoonLandfallCount} typhoons`) // .text(`${(typhoonLandfallCount*100/selectedYearGeoJsonData[0].features.length)}% typhoons`) .text(`${typhoonLandfallCount} of ${selectedYearGeoJsonData[0].features.length} typhoons (${(typhoonLandfallCount*100/selectedYearGeoJsonData[0].features.length).toFixed()}%)`) .attr('id','landfall-points'); } addBigYearTextStatic(overlayLLSVGText_landfall,`${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`,'black',50,90,'landfall-big-text') console.log(selectedYearGeoJsonData[1],(typhoonLandfallCount*100/selectedYearGeoJsonData[0].features.length).toFixed()); if(noIntensityData){ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons; Note: No intensity data.`; }else{ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`; } } });4c:Tfee,viewof typhoonIntensityScrubber = Scrubber(typhoonYear, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 300, format: typhoonYearScrubber => { let selectedYearGeoJsonData = filteredTyphoonsPerYear(sortedTyphoons,typhoonYearScrubber); geojsonIntensityLayer.clearLayers(); geojsonIntensityLayer.addData(selectedYearGeoJsonData[0]); geojsonIntensityLayer.setStyle({color: "grey", weight: 2, opacity: 0.5, }); layerGIntensity.clearLayers(); let noIntensityData = false; let landfallPointsCount = 0; let landfallPointsCountSevere = 0; let typhoonLandfallCount =0; let typhoonSevereLandfallCount =0; let typhoonSevereLandfallCheck =false; let typhoonLandfallCheck =false; for (const feat of selectedYearGeoJsonData[0].features){ for (var i = 0; i< feat.geometry.coordinates.length; i++){ let latlng =L.latLng(feat.geometry.coordinates[i][1], feat.geometry.coordinates[i][0]); //Check intersect land mass intersect here let tPoint = turf.point([feat.geometry.coordinates[i][0],feat.geometry.coordinates[i][1]]); let landfall = turf.booleanIntersects(world, tPoint); // console.log(feat.properties.grade[i]>5); if(landfall){ landfallPointsCount++; typhoonLandfallCheck =true; if(feat.properties.grade[i]==5){ console.log(feat.properties.grade[i],feat.properties.windspeed[i]) layerGIntensity.addLayer(L.circle(latlng, {stroke: false,radius: feat.properties.windspeed[i] ? feat.properties.windspeed[i]*3000 :0, opacity: 0.9, color: feat.properties.windspeed[i]?coloralt(feat.properties.windspeed[i]):'red'})); landfallPointsCountSevere++; typhoonSevereLandfallCheck = true; } } noIntensityData = isNaN(feat.properties.windspeed[i]) ? true : false; } if(typhoonLandfallCheck){ typhoonLandfallCount++; } if(typhoonSevereLandfallCheck){ typhoonSevereLandfallCount++; } } d3.select("#overlayLLSVGText_intensity").remove(); const overlayLLSVGText_intensity = d3.select(intensityMap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',250) .attr('id','overlayLLSVGText_intensity'); d3.selectAll("#severe-points").remove(); let maxPeakValue = maxPeakIntensity(selectedYearGeoJsonData[0].features); if(maxPeakValue != 'Nan'){ let avePeakText = overlayLLSVGText_intensity.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 65) .attr('font-weight', 600) .attr('fill', 'green') .attr('opacity', 0.8) .attr('transform', 'translate(50, 150)') .text(`${(landfallPointsCountSevere*100/landfallPointsCount).toFixed(2)}% of landfall points`) // .text(`${landfallPointsCountSevere} of ${landfallPointsCount} landfall points`) // .text(`${landfallPointsCountSevere} landfall points; ${typhoonLandfallCount} typhoons`) // .text(`${typhoonSevereLandfallCount} of ${typhoonLandfallCount} typhoons (${(typhoonSevereLandfallCount*100/typhoonLandfallCount).toFixed(2)}%)`) .attr('id','severe-points'); } addBigYearTextStatic(overlayLLSVGText_intensity,`${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`,'black',50,90,'intensity-big-text'); // console.log(selectedYearGeoJsonData[1],typhoonSevereLandfallCount, typhoonLandfallCount,(typhoonSevereLandfallCount*100/typhoonLandfallCount).toFixed(2)); console.log(selectedYearGeoJsonData[1], (landfallPointsCountSevere*100/landfallPointsCount).toFixed(2)); if(noIntensityData){ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons; Note: No intensity data.`; }else{ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`; } } });4d:[{"id":"59043c111274a27ebf73fed54359203b6a76decd910308ad1233a898571445b943fe17e60c37c4d31bf3dea812aa16a901c36f774a75ab6198b62dbe69f21577","href":"https://static.observableusercontent.com/files/59043c111274a27ebf73fed54359203b6a76decd910308ad1233a898571445b943fe17e60c37c4d31bf3dea812aa16a901c36f774a75ab6198b62dbe69f21577","name":"point-data.json","type":"application/json","lastModified":1668941723129.954,"size":187027},{"id":"dd28ff2a6422a442d40bfd152809640e4a15713301907dc91fcb79e530dfa12576c610f30a1f507b54651c6e82383e1603f302d1d992518a57c3929e5ff3f07e","href":"https://static.observableusercontent.com/files/dd28ff2a6422a442d40bfd152809640e4a15713301907dc91fcb79e530dfa12576c610f30a1f507b54651c6e82383e1603f302d1d992518a57c3929e5ff3f07e","name":"world.json","type":"application/json","lastModified":1669364312879.915,"size":293781}] 29:{"id":"40db58f3f4cb226f","slug":null,"title":"Flowers and Tracks: A visual and cartographic exploration","thumbnail":"85fb9e7c4c32230dde5bb68f626675a3ec5a31fd331ace838b28809be6f6f0d1","access_level":"public","create_time":"$D2022-11-20T10:55:23.129Z","update_time":"$D2023-10-04T00:39:06.599Z","view_time":null,"first_public_time":"$D2022-11-23T10:02:05.065Z","has_unpublished_edits":null,"fork":{"id":"9ee00c8d0c784e4d","slug":"flowers-and-tracks","title":"Flowers and Tracks","owner":{"id":"c9876ed17b18c97d","login":"chamthesleeptalker","name":"Cham Mamador"}},"stars":12,"starred":false,"owner":{"type":"team","id":"c9876ed17b18c97d","login":"chamthesleeptalker","name":"Cham Mamador","avatar_url":"https://avatars-next.observableusercontent.com/ea4472932bdeb8d8e794277a823d8c77de6eb41643e99a8231c63f5a3a6d6284","tier":"starter_2024","bio":"Codes for better mapping experience.","followed_by_you":false,"follows_you":false},"version":2924,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b5dad2d9597a06d","login":"chamthesleeptalker","name":"Cham Mamador","avatar_url":"https://avatars-next.observableusercontent.com/ea4472932bdeb8d8e794277a823d8c77de6eb41643e99a8231c63f5a3a6d6284","tier":null,"bio":"Codes for better mapping experience.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4b5dad2d9597a06d","login":"chamthesleeptalker","name":"Cham Mamador","avatar_url":"https://avatars-next.observableusercontent.com/ea4472932bdeb8d8e794277a823d8c77de6eb41643e99a8231c63f5a3a6d6284","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Flowers and Tracks: A visual and cartographic exploration","cells":[{"id":617,"value":"# Flowers and Tracks: A visual and cartographic exploration\n\nWe have a saying that, *\"Even the most dangerous things can be quite beautiful.\"*\n\nTake a few minutes and look at the piece below and tell me what you can see.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":945,"value":"svgBackground(svgMain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"### Maybe it reminded you of the bliss of summer from your childhood?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"### Or maybe you were reminded of the famous cherry blossoms of Japan and South Korea that attracts millions of tourists year after year?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"## Let's see what's behind these flowers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1236,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"svgBackground(svgBeforeRemove)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# These are the typhoon tracks on the northwestern Pacific area observed for 2019.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":721,"value":"> *The sizes of the circles were, just like their color, related to the intensity of the typhoon at that point in time.*\n> \n> *The data used to display this came RSMC Tokyo-Typhoon Center as indicated by [@z-richard](https://observablehq.com/@z-richard) in his work were this [notebook](https://observablehq.com/@z-richard/northwestern-pacific-typhoon-track-v3-2019) was forked from.*\n>\n> ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":781,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2045,"value":"# That was just for 2019. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2048,"value":"## Let's see how this region is with 70 years of typhoons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1659,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1991,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"container = yield htl.html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2700,"value":"Over this time period, we see that actually the frequency of the typhoons is as expected for the Northwestern Pacific region which is ~20 per year. However, there are still notable points in time that challenged that expectation. For 8 separate years, we saw that at least 30 typhoon events occurred with 39 typhoons recorded on 1967. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2741,"value":"| year | Number of typhoons |\n| ------ | -------- |\n| 1967 | 39 |\n| 1971, 1994 | 36 |\n| 1989, 1974 | 32 |\n| 1972, 1992 | 31 |\n| 1978 | 30 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2748,"value":"With that said, frequency is indeed a parameter that can be monitored however it's not very relevant as we can see that even before the 20th century typhoon occurrences can be over 30 typhoons. In addition to this, this can also be affected by El Nino or La Nina periods.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2754,"value":"## Then, how about *wind speed*?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2758,"value":"Apart from the number of typhoons for each year, the peak wind speed for each year was also identified.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2767,"value":"| Year | Peak Wind Speed (kts) |\n| ------ | -------- |\n| 1979 | 140 |\n| 1982, 2010, 2013 | 125 |\n| 1978, 1980, 1981, 1983, 1984, 1985, 1986, 1990, 1991, 2016, 2020, 2021 | 120 |\n| 1995, 2008, 2009, 2015, 2018, 2019 | 115 |\n| 1977, 1987, 1992, 1994, 1997, 1998, 2000, 2004, 2006, 2007, 2012 | 110 |\n| 1993, 2001, 2003, 2005, 2011 | 105 |\n| 1988, 1989, 2002, 2017 | 100 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2775,"value":"The 20th century peak wind speed ranges from a minimum of 100 kts (2002,2017) and reaches a maximum of 125 kts (2000, 2013). Looking at the table for the last 20 years, typhoon/s reaching a max speed of at least 100 kts yearly exists. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2795,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2549,"value":"# Wind speed which often is the measure for intensity won't be as critical if peak wind values are reached in the open ocean.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2798,"value":"When are typhoons destructive? How are risks measured? How are damages measured?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2808,"value":"![Risk Triangle for Natural Hazards](https://www.nortonrosefulbright.com/-/media/images/nrf/nrfweb/knowledge/publications/au_33055_natural-hazard-risk-triangle_1.png?revision=a54c059d-564d-441c-9836-2f13daee5492&h=415&w=750&hash=FBED645642D95085BAF2299E36A38318)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2810,"value":"The three sides of this triangle remind us that for the risk to adequately assessed/thought about, Exposure, Vulnerability, and Hazard needs to be considered.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2812,"value":"In an event such as typhoons, Exposure, Vulnerability, and Hazard will be determined by its track and where it intersects on land. Information on the path that the typhoon will traverse will help us prepare and identify potential risk. Will it hit a city with a high population density? Will in traverse through floodplains or low-lying areas increasing the risks of flooding? These are some questions that can be answered by having the tracks and the landfall information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2806,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2791,"value":"# Tracks are informative and crucial to identify landfall points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2817,"value":"A typhoon events can occur and dissipate without making landfall. This significantly lowers the risks of that event given that it will not traverse land where a community or city might be situated. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2821,"value":"#### Let's take a look at the number of typhoons that has actually traversed land.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2552,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2556,"value":"containerForLandfall = yield htl.html`

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"This typhoon, in particular, was described as *the fingerprint of global warming* in an [article](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#) published in **Scientific American**. In fact it brought the [highest rainfall observed](https://www.worldweatherattribution.org/climate-change-added-4bn-to-damage-of-japans-typhoon-hagibis/) in Japan's recorded history.\n\nIn total, Typhoon Hagibis took the lives of [121 and left 3 people missing until now](https://en.wikipedia.org/wiki/Typhoon_Hagibis). Of the estimated *10 billion* damages [*4 billion*](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#) can be attributed to climate change. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":764,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":762,"value":"# The likely of an event like Hagibis occurring has been increased to [67% due to climate change](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":785,"value":"Year after year we are breaking record after record related to climate change such as heatwaves, sea level rise, drought, intensity of typhoons, and so on. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"## *Hence, there is a need more than ever to take action against climate change.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":799,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2907,"value":"Despite the challenges that comes with being the country takes on this horrible typhoon cycle year after year the Filipinos have grown to be resilient. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2914,"value":"However, with the prospect of matters getting worse because of climate change innovative solutions needs to be implemented to protect the population.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2918,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2920,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2638,"value":"intensityMap = L.map(containerForIntensity,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2654,"value":"{\n intensityMap.addLayer(geojsonIntensityLayer);\n layerGIntensity.addTo(intensityMap);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2642,"value":"layerGIntensity = new L.LayerGroup();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2647,"value":"geojsonIntensityLayer = new L.GeoJSON();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2651,"value":"basemapTiles().addTo(intensityMap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2626,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2560,"value":"landfallMap = L.map(containerForLandfall,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2610,"value":"geojsonWorldLayer = new L.GeoJSON(world);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2605,"value":"{\n landfallMap.addLayer(geojsonLandfallLayer);\n layerGLandfall.addTo(landfallMap);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2603,"value":"layerGLandfall = new L.LayerGroup();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2601,"value":"geojsonLandfallLayer = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2564,"value":"basemapTiles().addTo(landfallMap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2547,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2068,"value":"perYearMap = L.map(containerForPerDecade,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2108,"value":"typhoonYear = {\n let start = 1950;\n let decade =[];\n for(var i = 1; (i+1950)<2023;i++){\n decade.push(start+i);\n }\n return decade;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2106,"value":"filteredTyphoonsPerYear = function(tyInput,year){\n \n let perDecadeFeatures =[];\n let yearId = (year.toString())[2]+(year.toString())[3];\n \n for (const typhoon of tyInput){\n let typhoonYearId = (typhoon.id[0]+typhoon.id[1])\n \n if(yearId === typhoonYearId){\n perDecadeFeatures.push(typhoon);\n }\n }\n console.log(perDecadeFeatures);\n \n let featureVersion = {\n 'type': \"FeatureCollection\",\n 'features':perDecadeFeatures\n }\n \n return [featureVersion,year]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2255,"value":"maxPeakIntensity = function(featuresForYear){\n const allMaxInstensity = featuresForYear.map(i=>{return _.max(i.properties.windspeed)})\n \n let maxMaxIntensity = _.max(allMaxInstensity);\n return isNaN(maxMaxIntensity) ? 'Nan' : maxMaxIntensity.toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2118,"value":"sortedTyphoons","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2196,"value":"layerGPerYear.addTo(perYearMap);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2182,"value":"perYearMap.addLayer(geojsonPerYearLayer);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"layerGPerYear = new L.LayerGroup();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2102,"value":"geojsonPerYearLayer = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"basemapTiles().addTo(perYearMap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2073,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1993,"value":"d3.select(\"#resetMonthlyMap\").on(\"click\", function() {\n\t\tgeojsonLayer.clearLayers();\n geojsonLayerStatic.clearLayers();\n d3.selectAll(\"#overlayLLSVGText\").remove();\n document.getElementById(\"mapScrubber\").value = 0;\n document.getElementById(\"mapScrubberText\").innerHTML = '';\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"initialmap = L.map(container,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"sortedTyphoons = _.sortBy(typhoonFeatures.features, [function(o) { \n let year = getMonthYear(o)[0].split(\" \")[1];\n return year; }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"getMonthYear = function(typhoonScrubber){\n let startMMYYY = new Date(typhoonScrubber.properties.time[0]).toLocaleDateString('en-us', { month:\"long\", year:\"numeric\"}); \n let endMMYYY = new Date(typhoonScrubber.properties.time[typhoonScrubber.properties.time.length-1]).toLocaleDateString('en-us', { month:\"long\", year:\"numeric\"}); \n return [startMMYYY,endMMYYY];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"initialmap.addLayer(geojsonLayer);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1937,"value":"initialmap.addLayer(geojsonLayerStatic);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"basemapTiles().addTo(initialmap);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"geojsonLayerStatic = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"geojsonLayer = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"(basemapTiles()).addTo(initialmap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"basemapTiles = function () {\n return L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {\n attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"bounds = L.latLngBounds(L.latLng(32.78678486504772,117.87119615191318), L.latLng(20.642706730875346, 139.02082464246405));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"allTracks(svgBeforeRemove);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"typhoonFeatures = generateFeatures(typhoons)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"generateFeatures = function(typhoonsInput){\n console.log(typhoonsInput)\nconst typhoonFeatures = {\n 'type': \"FeatureCollection\",\n 'features': typhoonsInput.map((d,i)=>{\n return{\n 'type':'Feature', \n 'id':d.IntID, \n 'properties':{\n 'datapoints':d.datapoints,\n 'cycloneNumber': d.cycloneNumber? d.cycloneNumber.trim():\"\",\n //'cycloneNumber':d.cycloneNumber.trim(),\n \"name\":d.name ? d.name.trim() : \"\" ,\n \"time\":d.stormData.map((e,j)=>{return e.time}),\n \"pressure\":d.stormData.map((e,j)=>{return parseFloat(e.hPa.trim())}),\n \"windspeed\":d.stormData.map((e,j)=>{return parseFloat(e.windSpeed.trim())}),\n \"landfall\": d.stormData.map((e,j)=>{return e.landfall.trim()}),\n \"grade\":d.stormData.map((e,j)=>{return e.grade}),\n },\n \"geometry\":{\n type:\"LineString\",\n coordinates: d.stormData.map((e,j)=>{return [parseFloat(e.long/10),parseFloat(e.lat/10)]})\n }\n }\n })\n};\n \nreturn typhoonFeatures;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1240,"value":"d3.select(\"#removeFlowers\").on(\"click\", function() {\n\t\tremoveFlowers(svgBeforeRemove);\n changeBackgroundToMap(svgBeforeRemove);\n flashText(svgBeforeRemove,\"I think you have a good idea now of what these tracks were actually.\",'black',30,490);\n removeFlashText(svgBeforeRemove);\n \n //changeBackgroundColor\n changeMapBackgroundColor('#647C90');\n \n //Add legend\n addLegend(svgBeforeRemove);\n //Add texts\n \n for(let i = 0; i<10000; i++){\n svgBeforeRemove.selectAll('.typhoon-path').raise();\n svgBeforeRemove.selectAll('.typhoon-graticules').raise();\n svgBeforeRemove.selectAll('graticule-x-text').raise();\n }\n //Add typhoon circles\n svgBeforeRemove.selectAll('.flower-petal-center').transition().delay(2000).duration(5000).ease(d3.easeBackOut).attr('opacity',0).end();\n addTyphoonPoints(svgBeforeRemove);\n\n //Add year text\n addBigYearText(svgBeforeRemove,\"2019\",'white',710,545);\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"d3.select(\"#resetRemoveFlowers\").on(\"click\", function() {\n\t\tallTracks(svgBeforeRemove);\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"addBigYearText = function(svg, text, fillColor, x, y){\n const bigYear = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 95)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.0)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('class','big-year-text');\n\n bigYear.transition()\n .delay(6000)\n .duration(6000)\n .ease(d3.easeQuadIn)\n .attr('opacity', 0.5)\n .end();\n\n return svg.node()\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1824,"value":"addBigYearTextStatic = function(svg, text, fillColor, x, y, id){\n if(!d3.selectAll(\"#big-year-text-static\")){\n let bigYear = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 95)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.5)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('id',id); \n }else{\n d3.selectAll(\"#big-year-text-static\").remove(); \n let bigYear = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 95)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.5)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('id',id); \n }\n return svg.node()\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"addTyphoonPoints = function(svg){\n for(const data of trackData){ \n const typhoonCSVG = typhoonCircles(svg,data,data);\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"typhoonCircles = function(svg, data, filteredData){\n const typhoonC = svg.append('g')\n .selectAll('.' + data.key)\n .data(filteredData.coordinates)\n .join('circle')\n .attr('transform', d => `translate(${projection(d)})`)\n .attr('r', 0)\n .attr('fill', 'white')\n .attr('opacity', 0)\n .attr('stroke', 'white')\n .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2)\n .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5)\n .attr('class','typhoon-centers');\n\n typhoonC.transition()\n .delay(2000)\n .duration(5000)\n .ease(d3.easeBackIn)\n .attr('r', (d, i) => i === 0 ? 0 : intensity(data.intensity[i])*50)\n .attr('fill', (d, i) => coloralt(data.intensity[i]))\n .attr('opacity', 0.6)\n .end();\n\n \n return typhoonC;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"addLegend = function(svg){\n const legendSVGG = svg.append('g')\n .attr('id','legend-g')\n .attr('transform', 'translate(20, 10)')\n .attr('opacity', 0);\n\n const legendSelf = svg.selectAll(\"#legend-g\")\n .append(() => legend({color:coloralt, \n title: 'Intensity (kts)',\n tickSize: 0,\n width: 180\n }))\n .attr('opacity', 0);\n \n legendSVGG.transition()\n .delay(7000)\n .duration(3000)\n .ease(d3.easeBackIn)\n .attr('opacity', 0.8)\n .end();\n\n legendSelf.transition()\n .delay(7000)\n .duration(3000)\n .ease(d3.easeBackIn)\n .attr('opacity', 0.8)\n .end();\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"changeMapBackgroundColor = function(color){\n d3.select(\"#svgBeforeRemove\").transition().delay(2000).duration(3000).style('background', '').end();\n d3.select(\"#svgBeforeRemove\").transition().delay(4000).duration(3000).style('background-color', color).end();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"removeFlashText = function(svg){\n svg.selectAll('.flash-text').transition()\n .delay(11000)\n .duration(2000)\n .ease(d3.easeQuadOut)\n .attr('opacity', 0)\n .end();\n\n svg.selectAll('.text-rectangle').transition()\n .delay(11000)\n .duration(2000)\n .ease(d3.easeBackOut)\n .attr('opacity',0)\n .end();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"//Intermediate notice\nflashText = function(svg, text, fillColor, x, y){\n const textRectangle = svg.append('rect')\n .attr('width','500px')\n .attr('height', '33px')\n .attr('opacity', 0)\n .attr('transform', `translate(${x-20}, ${y-20})`)\n .attr('fill', 'white')\n .attr('class','text-rectangle');\n \n const bottomText = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 14)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.0)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('class','flash-text');\n\n bottomText.transition()\n .delay(6000)\n .duration(6000)\n .ease(d3.easeQuadIn)\n .attr('opacity', 0.8)\n .end();\n\n textRectangle.transition()\n .duration(6000)\n .ease(d3.easeBackIn)\n // .attr('width','500px')\n // .attr('height', '33px')\n .attr('opacity',1)\n .end();\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"// remove flowers\nremoveFlowers = function(svg){\n svg\n .selectAll('.flower-petal')\n .transition()\n .delay(function(d,i){ console.log(i); return 5*i; }) \n .duration(3000)\n .ease(d3.easeQuadInOut)\n .attr('transform', (d,i) => `translate(${projection(d)}) scale(0)`)\n .attr('opacity', 0.0)\n .end();\n\n svg\n .selectAll('flower-petal').remove();\n\n // remove background\n \n\n \n\n //change backgound\n \n\n return svg.node();\n}\n \n\n// change background\n// add graticules\n// add map\n// add typhoon circles\n// add legend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"changeBackgroundToMap = function(svg){\n addBasemap(svg);\n addGraticule(svg);\n addGraticuleText(svg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"addGraticuleText = function(svg){\n const xGraticuleG = svg.append('g')\n .attr('font-size', 10)\n .attr('font-family', 'sans-serif')\n .attr('fill', 'white')\n .attr('opacity', 0)\n .attr('text-anchor', 'start')\n .attr('class', 'graticule-x-text');\n\n xGraticuleG.transition()\n .duration(10000)\n .ease(d3.easeBackInOut)\n .attr('opacity', 0.6)\n .end();\n \n longitude.map(x => {\n xGraticuleG.append('text')\n .attr('transform', `translate(${projection([x, -7]) + \"\"}) rotate(-90)`)\n .text(formatLongitude(x))\n .attr('y', 11)\n })\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"addBasemap = function(svg){\n const basemapSVG = svg.append('path')\n .datum(basemap)\n .attr('d', path)\n .attr('fill', '#C5C5C5')\n .attr('opacity',0)\n .attr('stroke', 'white')\n .attr('stroke-width', '0px')\n .attr('stroke-linejoin', 'round');\n \n basemapSVG.transition()\n .duration(15000)\n .ease(d3.easeBackInOut)\n .attr('opacity',1)\n .attr('stroke-width', '0.2px')\n .end();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"addGraticule = function(svg){\n const graticuleSVG = svg.append('path')\n .datum(graticule)\n .attr('d', path)\n .attr('stroke', 'grey')\n .attr('stroke-width', '0px')\n .attr('stroke-opacity', 0)\n .attr('class', 'graticules');\n \n\n graticuleSVG.transition()\n .duration(5000)\n .ease(d3.easeBackInOut)\n .attr('stroke', 'white')\n .attr('stroke-width', '0.3px')\n .attr('stroke-opacity', 0.7)\n .end();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"allTracks(svgMain);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"d3.select(\"#allTracks\").on(\"click\", function() {\n\t\tallTracks(svgMain);\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"// loop through all the typhoon tracks\nallTracks = function(svg){\n svg.style(\"background\",\"url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') \");\n svg.selectAll(\"*\").remove();\n let pathCount = 1;\n for (const data of trackData) {\n drawPath(svg,data,path, pathCount);\n drawFlower(svg, data, filteredTyphoons(data), petalPath, projection,intensity,color);\n pathCount++;\n }\n return \"The flowers have grown beautifully.\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"filteredTyphoons = function(data){\n let filteredData = {'coordinates':[],'intensity':[]};\n for(var i=0;i `translate(${projection(d)}) rotate(${rotation[rotAngle]}) scale(${intensity(filteredData.intensity[i])})`)\n .attr('opacity', 0.8)\n .end();\n const centerOfFlower = centerOfFlowerSVG(svg,data,filteredData);\n centerOfFlower.transition()\n .delay(function(d,i){ return 500*i; }) \n .duration(5000)\n .ease(d3.easeQuadInOut)\n .attr('r', (d, i) => i === 0 ? 1 : i < 0 ? 0.1 : Math.abs(intensity(filteredData.intensity[i])*20))\n .attr('opacity', 0.5)\n .end();\n }\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"centerOfFlowerSVG = function(svg, data, filteredData){\n const centerOfFlower = svg.append('g')\n .selectAll('.' + data.key)\n .data(filteredData.coordinates)\n .join('circle')\n .attr('class', data.key)\n .attr('transform', d => `translate(${projection(d)})`)\n .attr('r', 0 )\n .attr('fill', 'white')\n .attr('stroke', 'white')\n .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2)\n .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5)\n .attr('class','flower-petal-center');\n return centerOfFlower;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"flowerSVG = function(svg,data,rotAngle, filteredData){\n const flower = svg.append('g')\n .selectAll('.' + data.key)\n .data(filteredData.coordinates)\n .join('path')\n .attr('d',petalPath)\n .attr('class', data.key)\n .attr('transform', (d,i) => `translate(${projection(d)}) rotate(${rotAngle}) scale(0)`)\n .attr('fill', (d, i) => color(filteredData.intensity[i]))\n .attr('opacity', 0)\n .attr('stroke', 'white')\n .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2)\n .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5)\n .attr('class','flower-petal');\n return flower \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"drawPath = function(svg, data, path, pathCount){\n console.log(data);\n const typhoonTrack = svg.append('path')\n .datum(data)\n .attr('d', path)\n .attr('fill', 'none')\n .attr('stroke', '#333333')\n .attr('stroke-width', '0px')\n .attr('opacity', 0)\n .attr('class','typhoon-path');\n\n typhoonTrack.transition()\n .delay(function(d,i){ console.log(d); return 300*pathCount; }) \n .duration(3000)\n .ease(d3.easeQuadInOut)\n .attr('opacity', 0.8)\n .attr('stroke-width', '2px')\n .end();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"svgBackground = function(svg){\n svg.style(\"background\",\"url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') \");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"svgMain = d3.create('svg').attr('viewBox', [0, 0, 960, 600]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"svgBeforeRemove = d3.create('svg').attr('viewBox', [0, 0, 960, 600]).attr('id','svgBeforeRemove');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":843,"value":"### *Data Import*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":848,"value":"import {typhoons} from \"0a91455bf713c2ab\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"### *Data Source*\n- Typhoon Best Track Dataset: https://www.jma.go.jp/jma/jma-eng/jma-center/rsmc-hp-pub-eg/besttrack.html\n- JSON version created by [@hellonearthis](https://observablehq.com/@hellonearthis/rsmc-tokyo-typhoon-center-dataset)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":883,"value":"### *Utils*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2016,"value":"import {Scrubber} from \"1a96b75c91b60527\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":724,"value":"### *Set up lines*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"typhoonNumber = 19;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"myScale = 0.1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"formatLongitude = x => `${Math.abs(x)}°${x < 0 ? 'W' : 'E'}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"formatTime = d3.timeFormat('%B %d, %Y %H:%M')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"intensity = d3.scaleLinear()\n .domain([34, 48, 64, 85, 105])\n .range([0.06,0.12,0.18,0.24,0.3]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"coloralt = d3.scaleThreshold()\n .domain([34, 48, 64, 85, 105])\n .range(['#8299d9', '#4d63a1', '#e3ce71', '#e0ae51', '#e69035', '#e05f34'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"color = d3.scaleThreshold()\n .domain([34, 48, 64, 85, 105])\n .range(['#f6bc66','#f69c6d','#f68c70','#f57c73','#f56c77','#f55c7a']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"/* Rotate according to the longitude offset,\n and center the graph based on the latitude offset. */\nprojection = d3.geoMercator()\n .rotate([-140, 0])\n .center([0, 25]) \n .scale([600])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"basemap = d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json').then(data => {\n return topojson.feature(data, data.objects.countries)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"trackData = FileAttachment('point-data.json').json().then(d => {\n let result = []\n for (const key in d) {\n const rawData = d[key];\n result.push({\n 'type': \"LineString\",\n 'coordinates': rawData.map(d2 => d2.location),\n 'intensity': rawData.map(d2 => d2.intensity),\n 'time': rawData.map(d2 => formatTime(new Date(d2.time))),\n 'number': key\n });\n } \n return result;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"longitude = d3.range(100, 181, 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"*This petalPath is from [@sxywu's](https://observablehq.com/@sxywu/) Introduction to D3.js Workshop*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"petalPath = \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2585,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2578,"value":"turf = require('https://unpkg.com/@turf/turf@6/turf.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null